<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外卖平台运行指南</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: #f5f5f5;
            line-height: 1.6;
            color: #333;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background: white;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            border-radius: 10px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        
        .header {
            text-align: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 20px;
            border-radius: 10px;
            margin-bottom: 30px;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .section {
            margin-bottom: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }
        
        .section h2 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.5rem;
        }
        
        .section h3 {
            color: #555;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        
        .step {
            background: white;
            padding: 15px;
            margin: 10px 0;
            border-radius: 6px;
            border: 1px solid #e9ecef;
        }
        
        .step-number {
            display: inline-block;
            background: #667eea;
            color: white;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            text-align: center;
            line-height: 25px;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .code {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 10px;
            font-family: 'Courier New', monospace;
            margin: 10px 0;
            overflow-x: auto;
        }
        
        .warning {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
            padding: 15px;
            border-radius: 6px;
            margin: 15px 0;
        }
        
        .success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            padding: 15px;
            border-radius: 6px;
            margin: 15px 0;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background: #667eea;
            color: white;
            text-decoration: none;
            border-radius: 6px;
            margin: 10px 5px;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            background: #5a6fd8;
            transform: translateY(-2px);
        }
        
        .btn-success {
            background: #28a745;
        }
        
        .btn-warning {
            background: #ffc107;
            color: #333;
        }
        
        .file-list {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 15px;
            margin: 15px 0;
        }
        
        .file-list ul {
            list-style: none;
            padding: 0;
        }
        
        .file-list li {
            padding: 8px 0;
            border-bottom: 1px solid #e9ecef;
        }
        
        .file-list li:last-child {
            border-bottom: none;
        }
        
        .file-list li:before {
            content: "📄 ";
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🍽️ 外卖平台运行指南</h1>
            <p>完整的外卖平台系统使用说明</p>
        </div>
        
        <div class="section">
            <h2>🚀 快速开始</h2>
            <div class="step">
                <span class="step-number">1</span>
                <strong>直接运行</strong>：双击 <code>index.html</code> 文件
            </div>
            <div class="step">
                <span class="step-number">2</span>
                <strong>选择功能</strong>：点击"进入系统"或"登录/注册"
            </div>
            <div class="step">
                <span class="step-number">3</span>
                <strong>开始使用</strong>：体验完整的外卖平台功能
            </div>
        </div>
        
        <div class="section">
            <h2>📁 文件结构说明</h2>
            <div class="file-list">
                <h3>核心文件</h3>
                <ul>
                    <li><strong>index.html</strong> - 首页入口</li>
                    <li><strong>home.html</strong> - 主系统界面</li>
                    <li><strong>login.html</strong> - 登录注册页面</li>
                    <li><strong>database.js</strong> - 数据库系统</li>
                </ul>
                
                <h3>用户端</h3>
                <ul>
                    <li><strong>user.html</strong> - 用户界面</li>
                    <li><strong>styles.css</strong> - 样式文件</li>
                </ul>
                
                <h3>商家端</h3>
                <ul>
                    <li><strong>merchant.html</strong> - 商家管理界面</li>
                    <li><strong>dish-manage.html</strong> - 菜品管理</li>
                    <li><strong>dish-upload.html</strong> - 菜品上传</li>
                </ul>
                
                <h3>骑手端</h3>
                <ul>
                    <li><strong>rider.html</strong> - 骑手界面</li>
                </ul>
                
                <h3>AI功能</h3>
                <ul>
                    <li><strong>ai-recommendation.html</strong> - AI推荐页面</li>
                    <li><strong>ai-recommendation-engine.js</strong> - AI推荐引擎</li>
                    <li><strong>advanced-ai-engine.js</strong> - 高级AI引擎</li>
                </ul>
            </div>
        </div>
        
        <div class="section">
            <h2>🔧 运行方式</h2>
            
            <h3>方式1：直接运行（推荐）</h3>
            <div class="step">
                <span class="step-number">1</span>
                双击 <code>index.html</code> 文件
            </div>
            <div class="step">
                <span class="step-number">2</span>
                在浏览器中打开
            </div>
            <div class="step">
                <span class="step-number">3</span>
                开始使用系统
            </div>
            
            <h3>方式2：本地服务器</h3>
            <div class="code">
# 使用Python启动本地服务器
python -m http.server 8000

# 使用Node.js启动服务器
npx http-server

# 然后访问 http://localhost:8000
            </div>
        </div>
        
        <div class="section">
            <h2>👥 用户角色说明</h2>
            
            <div class="step">
                <span class="step-number">1</span>
                <strong>用户端</strong>：浏览商家、点餐下单、查看订单
            </div>
            <div class="step">
                <span class="step-number">2</span>
                <strong>商家端</strong>：管理菜品、处理订单、查看数据
            </div>
            <div class="step">
                <span class="step-number">3</span>
                <strong>骑手端</strong>：接单配送、地图导航、收益统计
            </div>
        </div>
        
        <div class="section">
            <h2>🤖 AI功能特色</h2>
            
            <div class="step">
                <span class="step-number">1</span>
                <strong>智能推荐</strong>：基于时间、天气、用户偏好的菜品推荐
            </div>
            <div class="step">
                <span class="step-number">2</span>
                <strong>深度学习</strong>：神经网络算法优化推荐效果
            </div>
            <div class="step">
                <span class="step-number">3</span>
                <strong>实时分析</strong>：动态调整推荐策略
            </div>
            <div class="step">
                <span class="step-number">4</span>
                <strong>A/B测试</strong>：多算法对比优化
            </div>
        </div>
        
        <div class="section">
            <h2>⚠️ 注意事项</h2>
            
            <div class="warning">
                <strong>重要提示：</strong>
                <ul>
                    <li>首次使用建议先重置数据</li>
                    <li>确保所有文件在同一目录下</li>
                    <li>建议使用现代浏览器（Chrome、Firefox、Edge）</li>
                    <li>数据存储在浏览器本地，清除浏览器数据会丢失</li>
                </ul>
            </div>
        </div>
        
        <div class="section">
            <h2>🆘 常见问题</h2>
            
            <h3>Q: 页面显示不正常？</h3>
            <div class="step">
                A: 检查文件是否完整，确保所有文件在同一目录
            </div>
            
            <h3>Q: 登录后没有数据？</h3>
            <div class="step">
                A: 点击"重置数据"按钮重新初始化数据
            </div>
            
            <h3>Q: AI推荐不工作？</h3>
            <div class="step">
                A: 检查浏览器控制台是否有错误信息
            </div>
        </div>
        
        <div class="section">
            <h2>🎯 快速测试</h2>
            <div class="success">
                <strong>测试步骤：</strong>
                <ol>
                    <li>打开 <code>index.html</code></li>
                    <li>点击"进入系统"</li>
                    <li>点击"登录/注册"</li>
                    <li>注册一个用户账户</li>
                    <li>体验各端功能</li>
                    <li>测试AI推荐功能</li>
                </ol>
            </div>
        </div>
        
        <div style="text-align: center; margin-top: 30px;">
            <a href="index.html" class="btn">🏠 返回首页</a>
            <a href="start.html" class="btn btn-success">🚀 开始使用</a>
            <a href="reset-data.html" class="btn btn-warning">🔄 重置数据</a>
        </div>
    </div>
</body>
</html>
